<template>
  <div>
    <!-- 轮播图 -->
    <swiper
      ref="swiper"
      @mouseover.native="stopPlay"
      @mouseout.native="startPlay"
      class="swiper"
      :options="swiperOption"
    >
      <swiper-slide>
        <img src="/img/banner/banner_1.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/img/banner/banner_2.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/img/banner/banner_3.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/img/banner/banner_4.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/img/banner/banner_5.jpg" alt="" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <!-- 热门景点  -->
    <div class="scenery">
      <div class="center">
        <div class="row1">
          <div class="txt2">
            <div class="icon"></div>
            <span>热门景点</span>
          </div>
          <router-link to="/scenery_list">更多&gt;&gt;</router-link>
        </div>
        <div class="pic">
          <div class="center">
            <div class="left-pic">
              <a href="scenery_show.html"
                ><img src="img/index/puTuoShan.jpg"
              /></a>
              <p>普陀山风景名胜区</p>
            </div>
            <div class="right-pic">
              <ul>
                <li>
                  <img src="/img/scenery/1.jpg" alt="" />
                  <p>朱家尖国际沙雕艺术广场</p>
                </li>
                <li>
                  <img src="/img/scenery/2.jpg" alt="" />
                  <p>朱家尖国际沙雕艺术广场</p>
                </li>
                <li>
                  <img src="/img/scenery/3.jpg" alt="" />
                  <p>朱家尖国际沙雕艺术广场</p>
                </li>
                <li>
                  <img src="/img/scenery/4.jpg" alt="" />
                  <p>朱家尖国际沙雕艺术广场</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hotel">
      <div class="center">
        <div class="row1">
          <div class="txt2">
            <div class="icon"></div>
            <span>东海人家</span>
          </div>
          <router-link to="/hotel">更多&gt;&gt;</router-link>
        </div>
        <div class="pic">
          <div class="center">
            <ul>
              <li>
                <img src="img/index/21.png" alt="" />
                <p>东沙古镇小岙民宿</p>
              </li>
              <li>
                <img src="img/index/22.png" alt="" />
                <p>东沙古镇小岙民宿</p>
              </li>
              <li>
                <img src="img/index/23.png" alt="" />
                <p>东沙古镇小岙民宿</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="food">
      <div class="center">
        <div class="row1">
          <div class="txt2">
            <div class="icon"></div>
            <span>舟山海味</span>
          </div>
          <router-link to="/food">更多&gt;&gt;</router-link>
        </div>
        <div class="pic">
          <div class="center">
            <div class="left-pic">
              <a href="scenery_show.html"
                ><img src="img/index/yepaidang.jpg"
              /></a>
              <p>沈家门排挡</p>
            </div>
            <div class="right-pic">
              <ul>
                <li>
                  <img src="img/food/1.jpg" alt="" />
                  <p>朱家尖国际沙雕艺术广场</p>
                </li>
                <li>
                  <img src="img/food/11.jpg" alt="" />
                  <p>朱家尖国际沙雕艺术广场</p>
                </li>
                <li>
                  <img src="img/food/12.jpg" alt="" />
                  <p>朱家尖国际沙雕艺术广场</p>
                </li>
                <li>
                  <img src="img/food/13.jpg" alt="" />
                  <p>朱家尖国际沙雕艺术广场</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="scenery2">
      <div class="center">
        <div class="txt2">
          <div class="icon"></div>
          <span>欢迎来舟山</span>
        </div>

        <div class="area">
          <ul>
            <li class="active">
              <img src="img/scenery/1.jpg" />
              <p>朱家尖国际沙雕艺术广场</p>
            </li>
            <li>
              <img src="img/scenery/2.jpg" />
              <p>朱家尖大青山国家公园</p>
            </li>
            <li>
              <img src="img/scenery/3.jpg" />
              <p>嵊泗原生态蓝色海岸休闲度假旅游带</p>
            </li>
            <li>
              <img src="img/scenery/4.jpg" />
              <p>庙子湖岛</p>
            </li>
            <li>
              <img src="img/scenery/1.jpg" />
              <p>朱家尖国际沙雕艺术广场</p>
            </li>
            <li>
              <img src="img/scenery/2.jpg" />
              <p>朱家尖大青山国家公园</p>
            </li>
            <li>
              <img src="img/scenery/3.jpg" />
              <p>嵊泗原生态蓝色海岸休闲度假旅游带</p>
            </li>
            <li>
              <img src="img/scenery/4.jpg" />
              <p>庙子湖岛</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    stopPlay() {
      console.log(this.$refs);
      this.$refs.swiper.$swiper.autoplay.stop()
    },
    startPlay() {
      console.log(this.$refs);
      this.$refs.swiper.$swiper.autoplay.start()
    }
  },
  data() {
    return {
      swiperOption: {
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>
<style scoped src="../assets/css/index.css"></style>
<style lang="scss" scoped>
.swiper {
  width: 1000px;
  margin: 0 auto;
  img {
    width: 100%;
  }
  ::v-deep .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }
}
</style>
